<!-- eslint-disable no-undef -->
<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostLoginType } from '@/api/login/types'
import type { FormRules, FormInstance } from 'element-plus'

import { ElMessage } from 'element-plus'
import { Back } from '@element-plus/icons-vue'

import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 变量
const router = useRouter()

// 表单数据
const formData = reactive<PostLoginType>({
	uname: '',
	pwd: '',
	captcha: ''
})
// 表单验证
const checkUname = (rule: any, value: string, callback: any) => {
	if (/^.{2,15}$/.test(value)) {
		callback()
	} else {
		callback(new Error('至少2~15个字符'))
	}
}
const formRules = reactive<FormRules>({
	uname: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		// { min: 2, max: 15, message: "至少2~15个字符", trigger: "blur" },
		{ validator: checkUname, trigger: 'blur' }
	],
	pwd: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 2, max: 15, message: '至少2~15个字符', trigger: 'blur' }
	],
	captcha: [
		{ required: true, message: '请输入验证码', trigger: 'blur' },
		{ min: 4, max: 4, message: '至少4个字符', trigger: 'blur' }
	]
})
// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	if (!formRef.value) return
	// formRef.value!.validate((isSuccess) => {
	formRef.value.validate((isSuccess) => {
		if (isSuccess) {
			// 1 请求接口
			// 2 判断 失败-弹框提示，成功-提示、存储、跳转
			console.log('表单数据.：', formData)
			ElMessage.success('登录成功')
			router.push('/')
		}
	})
}
</script>

<template>
	<!-- 
    <h1>hello login</h1> 
    1-布局  el-form  el-form-item  el-input/select等等
    2-收集数据  el-form :model="formData"  v-model="formData.键"
    3-表单验证  el-form :rules="formRules" prop="开启验证规则"
    4-提交验证  el-form ref="标识"     ref.validate(isSuccess => {})

    以前v3
    const formRef = ref(null)
    el-form ref="formRef"
    @click handleSubmit  formRef.value.validate

    现在v3ts
    const formRef = ref<FormInstance>()
    el-form ref="formRef"
    @click handleSubmit  formRef.value.validate
  -->
	<div class="login">
		<el-form size="large" :model="formData" :rules="formRules" ref="formRef" class="animate__animated animate__zoomInDown">
			<el-form-item>
				<div class="login-bird">
					<span class="brid-body"></span>
					<span class="brid-claw left"></span>
					<span class="brid-claw right"></span>
				</div>
				<h1>锋团运营平台🐝</h1>
			</el-form-item>
			<el-form-item prop="uname">
				<el-input placeholder="请输入用户名" v-model="formData.uname"></el-input>
			</el-form-item>
			<el-form-item prop="pwd">
				<el-input placeholder="请输入密码" v-model="formData.pwd"></el-input>
			</el-form-item>
			<el-form-item prop="captcha">
				<el-row>
					<el-col :span="18">
						<el-input placeholder="请输入验证码" v-model="formData.captcha"></el-input>
					</el-col>
					<el-col :span="6">
						<img src="@/assets/captcha.jpg" alt="captcha" width="95" height="40" style="vertical-align: middle" />
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item>
				<el-button type="default" @click="$router.push('/login')" :icon="Back"></el-button>
				<el-button type="primary" @click="handleSubmit" class="loginBtn">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100%;
	background-color: $qf-bg-color;
	display: flex;
	justify-content: center;
	align-items: center;

	.el-form {
		width: 300px;
		position: relative;

		h1 {
			font-size: 42px;
			color: #fff;
		}

		.el-form-item:nth-child(4) {
			:deep(.el-input__wrapper) {
				border-radius: 0 !important;
			}
		}
		.loginBtn {
			width: 234px;
		}
	}

	// bird

	.login-bird {
		position: absolute;
		height: 76px;
		// top: -70px;
		top: -100px;
		left: 50%;
		/* transform: translateX(-50%); */
		z-index: 0;
	}

	.login-bird .brid-body {
		background-image: url(@/svg/bird-body.svg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		width: 90px;
		height: 95px;
		left: 50%;
		margin-left: -45px;
	}

	.login-bird .brid-body:before {
		content: '';
		position: absolute;
		background-image: url(@/svg/bird-mouth.svg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		left: 50%;
		height: 20px;
		width: 20px;
		margin-left: -10px;
		bottom: 14px;
		z-index: 1;
	}

	.login-bird .brid-claw {
		position: absolute;
		height: 24px;
		width: 24px;
		background-color: #3292dc;
		transform: scaleY(0.6);
		border-radius: 50%;
		bottom: -12px;
		z-index: 1;
		transition: 0.3s ease-in-out;
	}

	.login-bird .brid-claw:before {
		content: '';
		width: 100%;
		height: 100%;
		opacity: 0;
		display: block;
		transition: 0.3s ease-out;
		background-image: url(@/svg/brid-claw.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.login-bird .brid-claw.left {
		left: 20%;
	}

	.login-bird .brid-claw.right {
		right: 20%;
	}

	.login-bird.password .brid-claw {
		bottom: -2px;
		height: 32px;
		width: 28px;
		transform: scale(1);
		background-color: transparent;
	}

	.login-bird.password .brid-claw:before {
		opacity: 1;
	}

	.login-bird.password .brid-claw.left {
		left: 50%;
		margin-left: -33px;
	}

	.login-bird.password .brid-claw.right {
		right: 50%;
		margin-right: -33px;
	}

	.login-bird.password .brid-claw.right:before {
		transform: rotateY(180deg);
	}

	.login-bird[data-v-e8e57ad9] {
		position: relative;
		height: 76px;
	}

	.login-bird .brid-body[data-v-e8e57ad9] {
		background-image: url(/login/bird-body.svg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		width: 90px;
		height: 95px;
		left: 50%;
		margin-left: -45px;
	}

	.login-bird .brid-body[data-v-e8e57ad9]:before {
		content: '';
		position: absolute;
		background-image: url(/login/bird-mouth.svg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		left: 50%;
		height: 20px;
		width: 20px;
		margin-left: -10px;
		bottom: 14px;
		z-index: 1;
	}

	.login-bird .brid-claw[data-v-e8e57ad9] {
		position: absolute;
		height: 24px;
		width: 24px;
		background-color: #3292dc;
		transform: scaleY(0.6);
		border-radius: 50%;
		bottom: -12px;
		z-index: 1;
		transition: 0.3s ease-in-out;
	}

	.login-bird .brid-claw[data-v-e8e57ad9]:before {
		content: '';
		width: 100%;
		height: 100%;
		opacity: 0;
		display: block;
		transition: 0.3s ease-in-out;
		background-image: url(/login/brid-claw.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.login-bird .brid-claw.left[data-v-e8e57ad9] {
		left: 20%;
	}

	.login-bird .brid-claw.right[data-v-e8e57ad9] {
		right: 20%;
	}

	.login-bird.password .brid-claw[data-v-e8e57ad9] {
		bottom: -2px;
		height: 32px;
		width: 28px;
		transform: scale(1);
		background-color: transparent;
	}

	.login-bird.password .brid-claw[data-v-e8e57ad9]:before {
		opacity: 1;
	}

	.login-bird.password .brid-claw.left[data-v-e8e57ad9] {
		left: 50%;
		margin-left: -33px;
	}

	.login-bird.password .brid-claw.right[data-v-e8e57ad9] {
		right: 50%;
		margin-right: -33px;
	}

	.login-bird.password .brid-claw.right[data-v-e8e57ad9]:before {
		transform: rotateY(180deg);
	}
	// bird
}
</style>
